<template>
  <div class="container">
    <ag-grid-vue
      style="width: 100%; height: 100%"
      :class="props.agClass"
      :columnDefs="props.columnDefs"
      :rowData="props.rowData"
      :defaultColDef="props.defaultColDef"
      :gridOptions="getGridOptions"
      :rowSelection="props.rowSelection"
      :pagination="props.pagination"
      :paginationPageSize="props.paginationPageSize"
      :paginationPageSizeSelector="props.paginationPageSizeSelector"
      @grid-ready="onGridReady"
    >
    </ag-grid-vue>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import 'ag-grid-community/styles/ag-grid.css'; // Mandatory CSS required by the Data Grid
import 'ag-grid-community/styles/ag-theme-quartz.css'; // Optional Theme applied to the Data Grid
import { AgGridVue } from 'ag-grid-vue3'; // Vue Data Grid Component
import { AG_GRID_LOCALE_CN } from '@ag-grid-community/locale';

const props = defineProps({
  agClass: {
    // 主题
    type: String,
    default: 'ag-theme-quartz'
  },
  gridOptions: {
    type: Object,
    default: () => {
      return {};
    }
  },
  columnDefs: {
    // 表头
    type: Array,
    default: () => []
  },
  rowData: {
    // 数据项
    type: Array,
    default: () => []
  },
  defaultColDef: {
    // 默认列配置
    type: Object,
    default: () => {
      return {
        flex: 1
      };
    }
  },
  rowSelection: {
    type: Object,
    default: () => {
      return {};
    }
  },
  pagination: {
    // 是否分页
    type: Boolean,
    default: false
  },
  paginationPageSize: {
    // 每页显示条数
    type: Number,
    default: 10
  },
  paginationPageSizeSelector: {
    // 每页显示条数选择器
    type: Array,
    default: () => [10, 20, 30, 50, 100]
  }
});

const emits = defineEmits(['onGridReady']);

// 配置项
const LocalGridOptions = {
  localeText: AG_GRID_LOCALE_CN // 设置为中文语言包
};

const getGridOptions = computed(() => {
  const funGridOptions = {
    ...LocalGridOptions,
    ...props.gridOptions
  };

  return funGridOptions;
});

function onGridReady(params: any) {
  // 获取gridApi
  emits('onGridReady', params);
  // this.gridApi3 = params.api;
  // this.columnApi3 = params.columnApi;
  // console.log("grid :"+ this.gridApi3);
  // console.log("columnApi  : "+this.columnApi3);
}
</script>

<style lang="scss" scoped></style>
